<template>
  <div class="table">
    <el-input v-model="searchData" type="text" class="search">搜索</el-input>
    <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
    <el-table
      style="width: 1000px"
      :data="netData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      :default-sort="{ prop: 'name', order: 'descending' }">
      <el-table-column prop="id" label="id" sortable width="90">  </el-table-column>
      <el-table-column prop="userName" label="用户名" sortable width="180">  </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">  </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="netData.length"
        style="width: 1000px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DetailTable",
  created() {
    this.getData();
},
  data() {
    return {
      netData:[{
        email:"",
        id:"",
        phone:"",
        userName:""
      }],
      searchData:"",// 模糊搜索
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
    };
  },
  methods: {
    //得到表格里的所有数据
    
    getData:function () {
      var that = this;
      axios.post("WebApps/allInformation",{
        token :this.$store.state.token
      }).then(
        function (response) {
          that.netData = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
    },
    search:function(){
      var that = this;
      axios.post('WebApps/fuzzyServlet',{
        token:that.$store.state.token,
        ways:that.searchData
      }).then(
        response =>{
          that.netData = response.data.data;
        }
      )
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>
<style scoped>
.table {
  margin: 0px auto;
  padding: 50px 20px 0px 20px;
  background-color: white;
  width: auto;
  height: 100%;
}
.pagination {
  margin: 0px auto;
  padding: 50px 20px 0px 20px;
  background-color: white;
  width: 1000px;
  height: 100%;
}
.search {
  width:650px;
}
i{
  height: 40px;
  width: 40px;
  color: white;
  background-color:#409EFF;

}
</style>